<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css"
	type="text/css" media="screen" />
<link rel="stylesheet"
	href="../static/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../static/css/style.css">

<script src="../static/js/jquery-1.9.1.js" type="text/javascript"
	charset="utf-8"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"
	type="text/javascript" charset="utf-8"></script>
<script src="../static/js/zmultipages.js" type="text/javascript"
	charset="utf-8"></script>

<script>
	$(document).ready(function(){
		form = $('#form').ZMultiPages();
	});
</script>

<form id="form" enctype="multipart/form-data" class="form-add-Property"
	action="/manage_properties" method="post">
	<div class="form-page" value="1">
		<div class="form-left-side col-md-6">
			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="ad-type" type="ad-type"
						name="ad-type" placeholder="I want to ">
						<option value="Sell">'Sell'</option>
						<option value="Rent">'Rent'</option>
					</select>
				</div>
				<div class="col-md-4">You are offering ...</div>
			</div>

			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="property-area"
						type="property-area" name="By" placeholder="By">
						<option value="owner">'Owner'</option>
						<option value="brooker">'Brooker'</option>
					</select>
				</div>
				<div class="col-md-4">Property is provided by...</div>
			</div>

			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="property-type"
						type="property-type" name="property-type"
						placeholder="Property type">
						<option value="single-house">{{_('Single house')}}</option>
						<option value="semi-detach">{{_('Semi detach')}}</option>
						<option value="town-house">{{_('Town house')}}</option>
						<option value="apartment">{{_('Apartment')}}</option>
						<option value="room">{{_('Room')}}</option>
					</select>
				</div>
				<div class="col-md-4">Property type</div>
			</div>

			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="contract" name="contract"
						placeholder="By">
						<option value="owner">'One year rent'</option>
						<option value="brooker">'Half years rent'</option>
						<option value="brooker">'Short term rent'</option>
						<option value="brooker">'Lease'</option>
					</select>
				</div>
				<div class="col-md-4">Property is should be...</div>
			</div>

			<!-- Price -->
			<div class="row form-group">
				<div class="col-md-7">
					<input class="form-control" type="text" name="price"
						placeholder="Price" />
				</div>
				<div class="col-md-4">Enter the price</div>
			</div>

			<!-- Propertiy name -->
			<div class="row form-group">
				<div class="col-md-7">
					<input class="form-control" id="property-name" type="text"
						name="property-name" placeholder="Property name" />
				</div>
				<div class="col-md-4">Enter a title</div>
			</div>

			<!-- Description -->
			<div class="row form-group">
				<div class="col-md-7">
					<textarea class="form-control" id="property-description" rows="5"
						name="property-description" placeholder="Description"></textarea>
				</div>

				<div class="col-md-4">Enter your description</div>
			</div>


		</div>
		<!--end of form-left-side -->

		<div class="form-right-side col-md-6">
			<!-- Location -->
			<div class="row form-group">
				<div class="col-md-7">
					<input class="form-control" id="location" type="text"
						name="location" placeholder="Location" />
				</div>
				<div class="col-md-4">Enter the Street name</div>
			</div>

			<!-- Postal code -->
			<div class="row form-group">
				<div class="col-md-7">
					<input class="form-control" id="price" type="text"
						name="postal code" placeholder="Postal code" />
				</div>
				<div class="col-md-4">Enter the postcode</div>
			</div>
		</div>
		<!--end of right-side -->

	</div>
	<!--end of page-1 -->

	<div class="form-page" value="2" style="display: none;">
		<div class="form-left-side col-md-8">

			<!-- Parking -->
			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="parking" name="parking">
						<option value="included">'Included'</option>
						<option value="charge">'Need pay'</option>
					</select>
				</div>
				<div class="col-md-4">Parking</div>
			</div>

			<!-- utilities -->
			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="utilities"
						name="utilities">
						<option value="included">'Included'</option>
						<option value="charge">'Need pay'</option>
					</select>
				</div>
				<div class="col-md-4">Hydro, heating</div>
			</div>

			<!-- Laundry -->
			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="internate"
						name="internate">
						<option value="included">'Included'</option>
						<option value="charge">'On site'</option>
					</select>
				</div>
				<div class="col-md-4">Laundry</div>
			</div>

			<!-- Internate -->
			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="internate"
						name="internate">
						<option value="included">'Included'</option>
						<option value="charge">'Need pay'</option>
					</select>
				</div>
				<div class="col-md-4">Internate</div>
			</div>

			<!-- Pets -->
			<div class="row form-group">
				<div class="col-md-7">
					<select class="form-control col-md-6" id="pets" name="pets">
						<option value="friendly">'Pets friendly'</option>
						<option value="not-allowed">'Not allowed'</option>
					</select>
				</div>
				<div class="col-md-4">Pets</div>
			</div>

			<div class="row">
				<div class="col-md-7">
					<label class="checkbox"> <input type="checkbox"
						value="remeber-me">Show to everyone
					</label>
				</div>
			</div>

			<input name="action" style="display: none;" /> <input name="id"
				style="display: none;" />
		</div>
		<!--end of left-side -->

		<div class="form-right-side col-md-4">
			<!-- Email -->
			<div class="row form-group">
				<div class="col-md-7">
					<input class="form-control" id="price" type="text" name="email"
						placeholder="Email" />
				</div>
				<div class="col-md-4">Enter the email</div>
			</div>

		</div>
		<!--end of right-side -->
	</div>
	<!-- end of class="page-2" -->

	<div class="row" class="col-md-12">
		<div class="btn-toolbar col-md-7">
			<button type="button" value="prev"
				class="prev-btn btn btn-primary col-md-3">Previous</button>
			<button type="button" value="next"
				class="next-btn btn btn-primary col-md-3">Next</button>
			<button type="submit" value="submit"
				class="submit btn btn-primary col-md-3">Submit</button>
		</div>
	</div>

</form>

</html>